<!--
 * @Author: your name
 * @Date: 2021-12-17 19:37:07
 * @LastEditTime: 2021-12-17 20:26:53
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \geek-admin-test\src\pages\vts.vue
-->
<template>
    <div>
        <span>课程:{{course2.name}}</span>
        <span>价格:{{course2.price}}</span>
        <div>
             <ul v-if="todos.length">
       <transition-group name="flip-list" tag="ul">
             <li v-for="(todo,i) in todos" :key="todo.title">
          <input type="checkbox" v-model="todo.done" />
          <span :class="{ done: todo.done }">{{ todo.title }}</span>
          <span class="remove-btn">❌</span>
        </li>
       </transition-group>
     
    </ul>
    <span v-else>暂无数据</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref,Ref } from '@vue/runtime-core';
interface 极客时间课程 {
    name:string,
    price:number
}

interface Todo{ title:string, done:boolean}

let todos:Ref = ref([{title:'学习Vue',done:true}])

const msg = ref('') //  根据输入参数推导字符串类型
const msg1 = ref<string>('') //  可以通过范型显示约束

const obj = reactive({})
const course = reactive<极客时间课程>({name: '玩转Vue3全家桶', price: 129})

const msg2 = computed(() => '') // 默认参数推导
const course2 = computed<极客时间课程>(() => {
  return {name: '玩转Vue3全家桶', price: 129}
})
</script>
<style scoped>
.done{
    text-decoration: line-through;
}
</style>